import { DemoBlock } from 'demos';
import { Button, Drawer } from '@pxxtech/web';

const showDrawer = (multistage?: boolean) => {
  Drawer.show({
    title: '标题',
    children: (
      <>
        <Drawer.Content>
          {multistage ? (
            <Button color="primary" onClick={() => showDrawer(true)}>
              再次打开抽屉
            </Button>
          ) : (
            <div
              style={{
                height: '10000px',
                backgroundColor: 'rgba(209, 23, 255, 0.2)',
              }}
            >
              内容
            </div>
          )}
        </Drawer.Content>
        <Drawer.Footer>
          <Button>取消</Button>
          <Button color="primary">确定</Button>
        </Drawer.Footer>
      </>
    ),
  });
};

export default () => {
  return (
    <>
      <DemoBlock title="normal">
        <Button onClick={() => showDrawer()}>normal 抽屉</Button>
      </DemoBlock>
      <DemoBlock title="多级抽屉">
        <Button onClick={() => showDrawer(true)}>多级抽屉</Button>
      </DemoBlock>
    </>
  );
};
